import React, { Component } from "react";
import { apiGetData } from '@/request/home'
import './style/style.less'
import '@/font/iconfont.css'
import Card from "./component/Card";
import Income from '@/views/dataStatics/Income'
import IncomeOffLine from '@/views/dataStatics/IncomeOffLine'
import _ from 'lodash'


class Index extends Component {
    state = {
        dataSource: []
    }
    async componentDidMount() {
        await this.getData()
    }

    getData = async () => {
        let res = await apiGetData()
        if (res.data && res.code === 0) {
            let data = res.data
            let dataSource = [
                {
                    title: '门店总订单数量',
                    value: data.allOnlineOrderCount
                },
                {
                    title: '门店今日订单数量',
                    value: data.todayOnlineOrderCount
                },
                {
                    title: '门店总订单金额',
                    value: data.allOnlineOrderPriceSum
                },
                {
                    title: '门店今日订单金额',
                    value: data.todayOnlineOrderPriceSum
                },
                {
                    title: '门店线下总订单数量',
                    value: data.allOfflineOrderCount
                },
                {
                    title: '门店今日线下订单数量',
                    value: data.todayOfflineOrderCount
                },
                {
                    title: '门店线下总订单金额',
                    value: data.allOfflineOrderPriceSum
                },
                {
                    title: '门店今日线下订单金额',
                    value: data.todayOfflineOrderPriceSum
                },
            ]
            this.setState({ dataSource })
        }
    }

    render() {
        const { dataSource } = this.state
        return <div className={"p-layout-box configuration"}>
            <div className="card-box">
                {
                    dataSource.map((v, i) => {
                        return <Card key={i} title={v.title} value={v.value} />
                    })
                }
            </div>
            <div style={{ marginTop: 30, fontWeight: 600 }}>门店收入</div>
            <Income style={{ overflow: 'hidden', flexGrow: 'unset' }} height={300} width={'100%'} />
            <div style={{ marginTop: 30, fontWeight: 600 }}>门店线下收入</div>
            <IncomeOffLine style={{ overflow: 'hidden', flexGrow: 'unset' }} height={300} width={'100%'} />
        </div>
    }
}

export default Index;
